<template>
  <div class="notice-card" :class="sideTheme">
    <div class="notice-top">
      <bullhorn class="notice-icon" />
      <span>公告</span>
    </div>
    <div><img class="notice-img" :src="cat" alt="" /></div>
    <div class="notice-content">
      <span style="color: #00dddd">Ctrl+D 收藏本站吧</span>
      <span style="color: #e65454">微信：ChristmasMarryYou</span>
    </div>
  </div>
</template>

<script setup name="NoticeCard">
import { useSettingsStore } from '@/store';
import { Bullhorn } from '@vicons/fa';
import cat from '@/assets/images/cat.gif';

const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);
</script>

<style lang="scss" scoped>
.notice-card {
  margin-top: 20px;
  padding: 20px 24px;
  border-radius: 8px;
  box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
}
.notice-top {
  .notice-icon {
    width: 18px;
    height: 18px;
    color: #f00;
    animation: 2s shake infinite;
  }
  span {
    margin-left: 6px;
    font-size: 19px;
    color: #4c4948;
  }
}
.notice-img {
  height: 50px;
  width: 50px;
}
.notice-content {
  span {
    display: block;
    font-size: 15px;
    font-weight: 700;
  }
}
@keyframes shake {
  0% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  4% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  8%,
  24% {
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg);
  }
  12%,
  28% {
    -webkit-transform: rotate(18deg);
    transform: rotate(18deg);
  }
  16% {
    -webkit-transform: rotate(-22deg);
    transform: rotate(-22deg);
  }
  20% {
    -webkit-transform: rotate(22deg);
    transform: rotate(22deg);
  }
  32% {
    -webkit-transform: rotate(-12deg);
    transform: rotate(-12deg);
  }
  36% {
    -webkit-transform: rotate(12deg);
    transform: rotate(12deg);
  }
  40%,
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.theme-dark {
  background: rgba(0, 0, 0, 0.5) !important;
  .notice-top span {
    color: #ffffffb3 !important;
  }
}
</style>
